import React from 'react'

import Search from './children/Search'

import Work from './children/Work'

import '@/assets/style/todoList.scss'


class TodoList extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      todolist: [], //未做任务
      donelist: [] //已做任务
    }
  }
  render() {
    const {todolist, donelist} = this.state
    return (
      <div id="todolist">
        <Search onAddList={this.addList.bind(this)} />
        <Work todolist={todolist} donelist={donelist} onUpdate={this.updateList.bind(this)} />
        <footer>
		    	Copyright &copy; 2014 todolist.cn <a href="#" onClick={e => {this.clear(); e.preventDefault()}}>clear</a>
		    </footer>
      </div>
    )
  }
  //获取任务列表
  componentDidMount() {
    let todo = JSON.parse(localStorage.getItem('todo'))
    if(!todo) todo = {todolist: [], donelist: []}
    const {todolist, donelist} = todo
    this.setState({
      todolist,
      donelist
    })
  }
  // //存储任务列表
  componentDidUpdate() {
    const {todolist, donelist} = this.state
    console.log({todolist, donelist});
    localStorage.setItem('todo', JSON.stringify({todolist, donelist}))
  }
  // 给搜索组件添加一个自定义事件
  addList(val) {
    const { todolist } = this.state
    this.setState(state => {
      return state.todolist = [...todolist, {id: Math.random(), val, do: true}]
    }, () => {
      console.log(this.state.todolist);
    })
  }
  // 更新数据
  updateDate(done, id) {
    let list1, list2,addItem = null;
    if(done) {
      list1 = 'todolist'
      list2 = 'donelist' 
    }else {
      list1 = 'donelist'
      list2 = 'todolist' 
    }
    this.setState(state => {
      return state[list1] = state[list1].filter(item => {
        if(item.id == id) {
          item.do = !item.do
          addItem = item
        }else return item
      })
    }, () => {
      this.setState(state => {
        return state[list2] = [...state[list2], addItem]
      })
    })

  }
  //操作数据
  updateList(key,done,e, val) {
    const {id} = e.target.parentNode
    let list, list2;
    if(done) {
      list = 'todolist'
      list2 = 'donelist' 
    }else {
      list = 'donelist'
      list2 = 'todolist' 
    }
    switch (key) {
      case 'changeStatus':
        this.updateDate(done, id)
        break;
      case 'del':
        this.setState(state => {
          return state[list] = state[list].filter(item => item.id != id)
        })
      break;
      case 'edited':
        this.setState(state => {
          return state[list] = state[list].map(item => {
            if(item.id == id) {
              item.id = Math.random()
              item.val = val
            }
            return item
          })
        })
      break;
      case 'drag':
        let idx1,idx2,item1,item2;
        this.state[list].map((item,index) => {
          if(item.id == val){
            idx1 = index,
            item1 = item
          }
          if(item.id == id) {
            idx2 = index
            item2 = item
          }
        })
        if(idx1 !== undefined && idx2 !== undefined) {
          this.setState(state => {
            state[list].splice(idx1, 1, item2)
            state[list].splice(idx2, 1, item1)
            return state[list]
          })
        }else {
          this.state[list2].map((item,index) => {
            if(item.id == val){
              idx1 = index,
              item1 = item
            }
          })
          this.setState(state => {
            // 上下交换位置
          //   item2.do = !item2.do
          //   item1.do = !item1.do
          //   state[list2].splice(idx1, 1, item2)
          //   state[list].splice(idx2, 1, item1)
          //   return state[list]
          // })
          // console.log(idx1, idx2, list,list2);
          // console.log(item1, item2);

          //拖拽完成
            // item2.do = !item2.do
            item1.do = !item1.do
            state[list2].splice(idx1, 1)
            state[list].splice(idx2+1, 0, item1)
            return state[list]
          })
          console.log(idx1, idx2, list,list2);
          console.log(item1, item2);
        }
        
      break;
      default:
        break;
    }

  }
  //清空任务
  clear() {
    this.setState({
      todolist: [],
      donelist: []
    })

  }

}
export default TodoList